<template>
  <view class="package-info">
    <!-- 第一行：价格信息和时间信息 -->
    <view class="package-header">
      <view class="package-price">
        <text class="price-symbol">￥</text>
        <text class="price-value">{{ packageData.fmaount || '10000' }}</text>
        <text class="price-unit">/套</text>
        <text class="original-price" v-if="packageData.originalPrice">（原价：￥{{ packageData.originalPrice }}）</text>
      </view>

      <view class="package-time">
        <view class="time-item" v-if="packageData.beginDate">
          <text class="time-label">开始时间</text>
          <text class="time-value">{{ formatDate(packageData.beginDate) }}</text>
        </view>
        <view class="time-item" v-if="packageData.endDate">
          <text class="time-label">结束时间</text>
          <text class="time-value">{{ formatDate(packageData.endDate) }}</text>
        </view>
      </view>
    </view>

    <!-- 第二行：套餐包名称 -->
    <view class="package-name">{{ packageData.title || '套餐包名称' }}</view>

    <!-- 第三行：套餐介绍 -->
    <view class="package-description" v-if="packageData.remarks">
      <view class="description-tag">套餐介绍</view>
      <view class="description-content" v-html="packageData.remarks"></view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'PackageInfo',
  props: {
    packageData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      
    }
  },
  methods: {
    formatDate(dateString) {
      if (!dateString) return ''
      
      try {
        const date = new Date(dateString)
        const year = date.getFullYear()
        const month = String(date.getMonth() + 1).padStart(2, '0')
        const day = String(date.getDate()).padStart(2, '0')
        return `${year}-${month}-${day}`
      } catch (error) {
        return dateString
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.package-info {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;

  // 第一行：价格和时间信息
  .package-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30rpx;

    .package-price {
      display: flex;
      align-items: baseline;
      flex: 1;

      .price-symbol {
        font-size: 32rpx;
        color: #ff6600;
        font-weight: normal;
      }

      .price-value {
        font-size: 60rpx;
        color: #ff6600;
        font-weight: bold;
        margin: 0 4rpx;
      }

      .price-unit {
        font-size: 32rpx;
        color: #333;
        font-weight: bold;
        margin-right: 20rpx;
      }

      .original-price {
        font-size: 24rpx;
        color: #999;
        margin-left: 10rpx;
      }
    }

    .package-time {
      display: flex;
      flex-direction: column;
      align-items: flex-end;

      .time-item {
        display: flex;
        align-items: center;
        margin-bottom: 8rpx;

        &:last-child {
          margin-bottom: 0;
        }

        .time-label {
          font-size: 24rpx;
          color: #ff6600;
          // background-color: #ff6600;
          border: 1px solid #ff6600;
          padding: 4rpx 12rpx;
          border-radius: 12rpx;
          margin-right: 12rpx;
        }

        .time-value {
          font-size: 28rpx;
          color: #333;
        }
      }
    }
  }

  // 第二行：套餐包名称
  .package-name {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 30rpx;
    line-height: 1.4;
  }

  // 第三行：套餐介绍
  .package-description {
    display: block; // 改为block布局
    
    .description-tag {
      background-color: #666;
      color: #fff;
      font-size: 24rpx;
      padding: 8rpx 16rpx;
      border-radius: 20rpx;
      margin-bottom: 15rpx; // 添加底部间距
      display: inline-block; // 让标签自适应宽度
      width: auto;
    }

    .description-content {
      font-size: 28rpx;
      color: #333;
      line-height: 1.5;
      width: 100%;
      display: block;
    }
  }
}
</style>
